<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/my_style.css">

    <!-- 用于引入外部html -->
    <script src="../js/include.js"></script>

    <!-- 图标文件 -->
    <script src="../js/feather.min.js"></script>

    <!-- echarts + bmap 依赖 -->
    <script src="../js/echarts.js"></script>

    <!-- jQuery -->
    <script src="../js/jquery-3.4.1.min.js"></script>

    <title>出行方式分析</title>
</head>

<body>
<!-- 共用的navbar -->
<include src="navbar.html"></include>

<div class="container-fluid">
    <div class="row">
        <!-- 共用的sidebar -->
        <include src="sidebar.html"></include>
        <!-- 主要内容 -->
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <div class="row">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="container" class="" style="width: 1500px;height: 625px;margin-top: 24px;"></div>
                <script>
                    var dom = document.getElementById("container");
                    var myChart = echarts.init(dom);
                    var app = {};
                    var timea = "0";
                    var timeb = "0";
                    var timec = "0";
                    var timed = "0";
                    var timee = "0";
                    // var e=4;
                    // var f=5;
                    var busa = 0;
                    var busb = 0;
                    var busc = 0;
                    var busd = 0;
                    var cara = 0;
                    var carb = 0;
                    var carc = 0;
                    var card = 0;
                    var walka = 0;
                    var walkb = 0;
                    var walkc = 0;
                    var walkd = 0;
                    var subawaya = 0;
                    var subawayb = 0;
                    var subawayc = 0;
                    var subawayd = 0;
                    var bikea = 0;
                    var bikeb = 0;
                    var bikec = 0;
                    var biked = 0;
                    var index = 0;
                    option = null;

                    //定时刷新后面的数据
                    function f(args) {
                        // $.ajax({
                        //     type: "POST",
                        //     url: "/count/time",
                        //     dataType: 'text',
                        //     async: false,
                        //     success: function (t) {
                        //         timee = t;
                        //         console.log("time:"+t);
                        //         var hour =timee.slice(8,10);
                        //         var minute =timee.slice(10,12);
                        //         timee = hour + ":" + minute;
                        //     },
                        //     error: function () {
                        //     }
                        // });
                        $.ajax({
                            cache: false,
                            type: "POST",
                            url: "/move/fresh",
                            dataType: 'json',
                            async: true,
                            /*contentType: "application/x-www-form-urlencoded",
                            traditional: true, //traditional 为true阻止深度序列化*/
                            success: function (fresh) {
                                if (fresh.length) {
                                    timea = timeb;
                                    timeb = timec;
                                    timec = timed;
                                    busa = busb;
                                    busb = busc;
                                    busc = busd;
                                    walka = walkb;
                                    walkb = walkc;
                                    walkc = walkd;
                                    subawaya = subawayb;
                                    subawayb = subawayc;
                                    subawayc = subawayd;
                                    bikea = bikeb;
                                    bikeb = bikec;
                                    bikec = biked;
                                    cara = carb;
                                    carb = carc;
                                    carc = card;
                                    for (var i = 0; i < fresh.length; i++) {
                                        switch (fresh[i].type) {
                                            case 0:
                                                busd = fresh[i].count;
                                                timee = fresh[0].time;
                                                var hour = timee.slice(8, 10);
                                                var minute = timee.slice(10, 12);
                                                timee = hour + ":" + minute;
                                                timed = timee;
                                                break;
                                            case 1:
                                                card = fresh[i].count;
                                                timee = fresh[0].time;
                                                var hour = timee.slice(8, 10);
                                                var minute = timee.slice(10, 12);
                                                timee = hour + ":" + minute;
                                                timed = timee;
                                                // timed = fresh[i].time;
                                                break;
                                            case 2:
                                                walkd = fresh[i].count;
                                                timee = fresh[0].time;
                                                var hour = timee.slice(8, 10);
                                                var minute = timee.slice(10, 12);
                                                timee = hour + ":" + minute;
                                                timed = timee;
                                                // timed = fresh[i].time;
                                                break;
                                            case 3:
                                                subawayd = fresh[i].count;
                                                timee = fresh[0].time;
                                                var hour = timee.slice(8, 10);
                                                var minute = timee.slice(10, 12);
                                                timee = hour + ":" + minute;
                                                timed = timee;
                                                // timed = fresh[i].time;
                                                break;
                                            case 4:
                                                biked = fresh[i].count;
                                                timee = fresh[0].time;
                                                var hour = timee.slice(8, 10);
                                                var minute = timee.slice(10, 12);
                                                timee = hour + ":" + minute;
                                                timed = timee;
                                                // timed = fresh[i].time;
                                                break;

                                        }
                                    }
                                }
                            },
                            error: function () {
                            }


                        })

                        setTimeout(function () {

                            option = {
                                legend: {},
                                tooltip: {
                                    trigger: 'axis',
                                    showContent: false
                                },
                                dataset: {
                                    source: [
                                        ['product', timea, timeb, timec, timed],
                                        ['bus', busa, busb, busc, busd],
                                        ['walk', walka, walkb, walkc, walkd],
                                        ['subway', subawaya, subawayb, subawayc, subawayd],
                                        ['bike', bikea, bikeb, bikec, biked],
                                        ['car', cara, carb, carc, card]
                                    ]
                                },
                                xAxis: {type: 'category'},
                                yAxis: {gridIndex: 0},
                                grid: {top: '55%'},
                                series: [
                                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                    {
                                        type: 'pie',
                                        id: 'pie',
                                        radius: '30%',
                                        center: ['50%', '25%'],
                                        label: {
                                            formatter: '{b}: {d}%'
                                        },
                                        encode: {
                                            itemName: 'product',
                                            value: timed,
                                            tooltip: timed
                                        }
                                    }
                                ]
                            };

                            myChart.on('updateAxisPointer', function (event) {
                                let xAxisInfo = event.axesInfo[0];
                                if (xAxisInfo) {
                                    let dimension = xAxisInfo.value + 1;
                                    myChart.setOption({
                                        series: {
                                            id: 'pie',
                                            label: {
                                                formatter: '{b}: {@[' + dimension + ']} {d}%)'
                                            },
                                            encode: {
                                                value: dimension,
                                                tooltip: dimension
                                            }
                                        }
                                    });
                                }
                            });

                            myChart.setOption(option);

                        });

                        // myChart.setOption(option);
                    }
                    f();
                    setInterval(f, 2000)
                </script>
            </div>
        </main>
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>

</html>